<template>
  <div class="reading">
    <el-card class="box-card">
      <div slot="header"
           class="clearfix">
        <span>添加</span>
      </div>
      <el-form :model="newBook"
               :inline="true">
        <el-form-item label="书名">
          <el-input v-model="newBook.name"
                    placeholder="书名"></el-input>
        </el-form-item>
        <el-form-item label="作者">
          <el-input v-model="newBook.author"
                    placeholder="书名"></el-input>
        </el-form-item>
        <el-form-item label="封面">
          <el-button @click="uploadPic">上传</el-button>
        </el-form-item>
        <el-form-item label="类型"
                      v-for="(bookType,index) in newBook.type"
                      :key="index">
          <el-input v-model="newBook.type[index]">
            <el-button slot="append"
                       icon="el-icon-delete"
                       @click="deleteType(index)"
                       v-if="index>=1"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-plus"
                     @click="addType">添加类型</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success"
                     icon="el-icon-check"
                     circle
                     @click="addBook">确认添加</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success"
                     circle
                     @click="importAsWeb">网址导入</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card">
      <div slot="header"
           class="clearfix">
        <span>已有书籍</span>
      </div>
      <el-row>
        <el-col :span="6"
                v-for="(book, index) in bookList"
                :key="index">
          <div class="book">
            <img :src="book.picture?picture:'/static/书封面.png'">
            <div class="book-content">
              <div class="name">{{book.name.length >= 11?`${book.name.substring(0,11)}...`:book.name}}</div>
              <div class="content">
                <div class="author">
                  <svg-icon icon-class="user" />&nbsp;&nbsp;&nbsp;&nbsp;{{book.author}}</div>
                <div class="author">
                  <svg-icon icon-class="user" />&nbsp;&nbsp;&nbsp;&nbsp;提交人:{{book.submitter}}</div>
                <div class="type">
                  <div v-for="(item,index) in book.type"
                       :key="index"
                       class="type_item">{{item}}</div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <import-book :option="option"
                 @addSuccess="addSuccess"></import-book>
  </div>
</template>

<script>
import request from "@/utils/request";
import { getToken } from "@/utils/auth";
import ImportBook from "./dialog/importBook";

export default {
  name: "reading",
  data() {
    return {
      newBook: {
        name: "",
        author: "",
        type: [""],
        submitter: ""
      },
      bookList: [],
      option: {
        show: false
      }
    };
  },
  computed: {
  },
  components: { ImportBook },
  mounted() {
    this.queryBook();
  },
  methods: {
    addSuccess(result) {
      console.log("result", result);
      this.bookList = result;
      this.option.show = false;
    },
    importAsWeb() {
      this.option.show = true;
    },
    addType() {
      this.newBook.type.push("");
    },
    deleteType(index) {
      this.newBook.type.splice(index, 1);
    },
    uploadPic() {},
    queryBook() {
      return request({
        url: "book/query",
        data: ""
      }).then(res => {
        this.bookList = res;
      });
    },
    addBook() {
      var submitter = getToken();
      this.newBook.submitter = submitter.substring(0, submitter.indexOf("/"));
      return request({
        url: "book/add",
        data: this.newBook
      }).then(res => {
        this.$message({
          message: "添加成功",
          type: "success"
        });
        this.newBook = {
          name: "",
          author: "",
          type: [""],
          submitter: ""
        };
        this.bookList = res;
      });
    }
  }
};
</script>

<style scoped>
.box-card {
  margin-top: 30px;
  width: 85%;
}
.reading {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.book {
  border-radius: 10px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  height: 300px;
  width: 90%;
  display: flex;
  align-items: center;
}

.book-content {
  height: 80%;
  display: flex;
  flex-direction: column;
  width: 50%;
}
.name {
  font-size: 30px;
}
.content {
  width: 100%;
  display: flex;
  margin-top: 25px;
  height: 80%;
  flex-direction: column;
  justify-content: space-between;
}
.type {
  margin-top: 25px;
  display: flex;
}

.type_item {
  margin-right: 10px;
}
.suggest {
  display: flex;
  justify-content: space-between;
}
</style>


